<template>
  <div>
    <el-container>
      <el-header>
        <div class="h-r-nsl">
          <ul class="nav">
            <li><router-link to="/" active-class="active" exact>首页</router-link></li>
            <!-- 登录和注册 -->
            <li class="login"><router-link to="/login" title="登录" active-class="current">登录</router-link></li>
            <li><router-link to="/register" title="注册" active-class="active">注册</router-link></li>
          </ul>
        </div>
      </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
    name:'Home',
    // beforeDestroy(){
    //   console.log('Home组件即将被销毁了')
    // },
    // mounted(){
    //   console.log('Home组件挂载完毕')

    // }
    data() {
      return {
        activeName:'first'
      }
    },
    methods:{
      logout(){
        window.sessionStorage.clear();
        this.$router.push({path:"/login"});
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //退出
      logout() {
      //清空cookie值
      cookie.set('guli_token','',{domain: 'localhost'})
      cookie.set('guli_ucenter','',{domain: 'localhost'})
      //回到首页面
      window.location.href = "/";
    }
    }
}
</script>

<style scoped>
 /* @media screen and (min-width:1280px) {
.container{
        position: relative;
        width:1280px;
    }
} */
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  /* body{
    background-color: skyblue;
} */
.h-r-nsl{
    /* background-color: pink; */
    /* width: 1250px; */
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.h-r-nsl ul li{
    float: left;
    height: 100%;
}
.nav {
    height:100%;
    /* background-color: skyblue; */
    text-align: center;
}

a{
    color:#fff;
    font-size: 16px;
}

.nav li{
    float: left;
    font-size: 16px;
    font-weight: 700;
}
.login{
  margin-left: 1190px;
}
</style>